function Swiper(el) {
    this.el = document.querySelector(el)
    this.pages = this.el.querySelectorAll('ul li')
    this.t = null
    this.num = 1
    this.init()
}
Swiper.prototype.init = function() {
    this.autoplay()
    this.pageOver()
    this.pageOut()
}
Swiper.prototype.pageOut = function() {
    this.pages.forEach(item => {
        item.onmouseout = () => {}
    })
}
Swiper.prototype.pageOver = function() {
    this.pages.forEach((item, i) => {
        item.onmouseover = () => {
            clearInterval(this.t)
            this.num = i + 1
            this.el.querySelector('img').src = `./imgs/img${this.num}.jpg`
            this.tbPage(this.num)
        }
    })
}
Swiper.prototype.autoplay = function() {
    this.t = setInterval(() => {
        this.num++
            if (this.num > 6) this.num = 1
        this.el.querySelector('img').src = `./imgs/img${this.num}.jpg`
        this.tbPage(this.num)
    }, 2000)
}
Swiper.prototype.tbPage = function(num) {
    this.el.querySelector('ul li.active').className = ''
    this.el.querySelector(`ul li:nth-of-type(${num})`).className = 'active'
}